<template>
  <div class="agreement">
    <van-nav-bar :title="speaker.speakerName + '教授电子劳务协议'" fixed placeholder/>
    <div class="agreement_content" v-html="html"></div>
    <div class="sign_img" v-if="false">
      <img class="sign_img__inner" :src="signImg" alt="">
    </div>
    <base-footer>
      <van-button type="primary" block @click="clickSign">
        {{ signImg ? '重新签署' : '签署协议' }}
      </van-button>
    </base-footer>
  </div>
  <AgreementSignature
    ref="refAgreementSignature"
    :meeting-id="route.params.meetingId"
    :speaker-id="route.params.speakerId"
    @submit="handleSubmit"
  ></AgreementSignature>
</template>

<script setup>
import AgreementSignature from './components/signature.vue'
import moment from 'moment'
import { onMounted, computed, watch } from 'vue';
import { ref, inject } from 'vue'
import { useRoute } from 'vue-router';
import { useStore } from 'vuex';

const store = useStore();

const detail = ref({})
const curDate = moment().format('YYYY-MM-DD')
const html = ref('')

// const html = ref('<p style="margin-top: 7px;margin-bottom: 7px;text-align: center;font-family: 宋体;font-size: 16px;text-wrap: wrap"><strong><span style="font-size: 21px">劳务协议</span></strong></p><p style="margin-top: 7px;margin-bottom: 7px;font-family: 宋体;font-size: 16px;text-wrap: wrap"><span style="font-size: 14px"><span style="font-family:宋体">甲</span> &nbsp;&nbsp;&nbsp;<span style="font-family:宋体">方：</span></span><span style="text-decoration:underline;"><span style="font-size: 14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family:宋体">中关村精准医学基金会</span> &nbsp;</span></span><span style="text-decoration:underline;"><span style="font-size: 14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></p><p style="margin-top: 7px;margin-bottom: 7px;font-family: 宋体;font-size: 16px;text-wrap: wrap"><span style="font-size: 14px"><span style="font-family:宋体">乙</span> &nbsp;&nbsp;&nbsp;<span style="font-family:宋体">方：</span></span><span style="text-decoration:underline;"><span style="font-size: 14px">&nbsp;${speakerName}&nbsp;</span></span><span style="text-decoration:underline;"><span style="font-size: 14px">&nbsp;&nbsp;</span></span><span style="text-decoration:underline;"><span style="font-size: 14px">&nbsp;</span></span><span style="text-decoration:underline;"><span style="font-size: 14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span><span style="text-decoration:underline;"><span style="font-size: 14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span><span style="font-size: 14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="font-family:宋体">联系方式：</span></span><span style="text-decoration:underline;"><span style="font-size: 14px">&nbsp;${phone}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></p><p style="margin-top: 7px;margin-bottom: 7px;font-family: 宋体;font-size: 16px;text-wrap: wrap"><span style="font-size: 14px"><span style="font-family:宋体">身份证号：</span><span style="font-family:宋体">___${cardNumber}___</span></span></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:宋体">为了促进医学健康领域学术交流，推动健康公益事业发展，中关村精准医学基金会主办的</span><span style="font-family:宋体">“</span></span><span style="font-family: 宋体;color: rgb(255, 0, 0);font-size: 14px">医路有你</span><span style="color: rgb(255, 0, 0);font-size: 14px">&nbsp;</span><span style="font-family: 宋体;color: rgb(255, 0, 0);font-size: 14px">健康随行</span><span style="font-family: 宋体;font-size: 14px">”公益项目，现聘请专家参与解读和讨论，将资助专家参加会议。甲方聘请乙方提供宣讲服务；为明确双方义务及权利，经双方协商达成以下一致协议：</span></p><p style="margin: 0 0 0 71px;font-family: Calibri;font-size: 14px;text-wrap: wrap;line-height: 24px"><span style="font-family: Arial;color: rgb(51, 51, 51);font-size: 14px">第一条&nbsp;</span><span style="font-family: 宋体;font-size: 14px">期限为自协议签署之日起至项目结束终止。</span></p><p style="margin: 0 0 0 71px;font-family: Calibri;font-size: 14px;text-wrap: wrap;line-height: 24px"><span style="font-family: Arial;color: rgb(51, 51, 51);font-size: 14px">第二条&nbsp;</span><span style="font-family: 宋体;font-size: 14px">乙方提供的劳务内容：</span><span style="font-family: 宋体;color: rgb(255, 0, 0);font-size: 14px">公益健康知识宣讲</span><span style="font-family: 宋体;font-size: 14px">。</span></p><p style="font-size: medium;text-wrap: wrap;line-height: 24px"><strong><span style="font-family: 宋体;font-size: 14px">第三条：劳务费用支付及方式</span></strong></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;text-indent: 28px;line-height: 24px"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:宋体">本合同采用按次结算，乙方提供本人身份证复印件与银行卡复印件，甲方依法为乙方代扣代缴个人所得税，支付税后劳务费</span> </span><span style="text-decoration:underline;"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:宋体">￥</span> &nbsp;${speakerAppearanceFeeAftertax}&nbsp;</span></span><span style="font-family: 宋体;font-size: 14px">元整，支付方式经双方协商结算。</span><span style="font-family: 宋体;font-size: 14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></p><p style="font-size: medium;text-wrap: wrap;line-height: 24px"><strong><span style="font-family: 宋体;font-size: 14px"><span style="font-family:宋体">第四条</span> </span></strong><strong><span style="font-family: 宋体;font-size: 14px">双方的基本权利与义务</span></strong></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;text-indent: 28px;line-height: 24px"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:Calibri">1</span><span style="font-family:宋体">、如乙方严重违反合同约定及法律规定，甲方有权终止协议。</span></span></p><p style="font-size: medium;text-wrap: wrap;line-height: 24px"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:Calibri">2</span><span style="font-family:宋体">、乙方由于个人原因所发生的疾病以及伤残等意外事故，乙方自行负责。</span></span></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;text-indent: 28px;line-height: 24px"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:Calibri">3</span><span style="font-family:宋体">、</span></span><span style="font-size: 14px"><span style="font-family:宋体">任何一方单方面解除本协议的，需</span></span><span style="font-family: 宋体;font-size: 14px">以</span><span style="font-size: 14px"><span style="font-family:宋体">书面通知</span></span><span style="font-family: 宋体;font-size: 14px">告知</span><span style="font-size: 14px"><span style="font-family:宋体">另一方</span></span><span style="font-family: 宋体;font-size: 14px">，经双方协商终止本协议。</span></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;text-indent: 28px;line-height: 24px"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:Calibri">4</span><span style="font-family:宋体">、双方应严格保守在合作过程中所了解的商业及技术机密，否则应对因此造成的损失承担赔偿。</span></span></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;text-indent: 28px;line-height: 24px"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:Calibri">5</span><span style="font-family:宋体">、本协议解除或终止时，乙方应向甲方指定的人员交接工作；并立即停止以甲方名义从事一切活动。</span></span></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;text-indent: 28px;line-height: 24px"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:Calibri">6</span><span style="font-family:宋体">、乙方应按照甲方要求提供劳务服务，不得弄虚作假。</span></span></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;text-indent: 28px;line-height: 24px"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:Calibri">7</span><span style="font-family:宋体">、乙方保证具有完成劳务服务的专业知识与经验，不得提供虚假履历与身份信息。</span></span></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;line-height: 24px"><strong><span style="font-family: 宋体;font-size: 14px"><span style="font-family:宋体">第五条</span> <span style="font-family:宋体">违约责任</span></span></strong></p><p style="font-size: medium;text-wrap: wrap;text-indent: 28px;line-height: 24px"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:Calibri">1</span><span style="font-family:宋体">、乙方未按照合同约定提供劳务，甲方有权减少支付劳务报酬。</span></span></p><p style="font-size: medium;text-wrap: wrap;text-indent: 28px;line-height: 24px"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:Calibri">2</span><span style="font-family:宋体">、乙方不履行劳务的，甲方有权不予支付劳务报酬且乙方应当承担所有劳务报酬费用</span><span style="font-family:Calibri">20%</span><span style="font-family:宋体">的违约金。</span></span></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;line-height: 24px"><strong><span style="font-family: 宋体;font-size: 14px"><span style="font-family:宋体">第六条</span> <span style="font-family:宋体">本协议解除终</span></span></strong><strong><span style="font-size: 14px"><span style="font-family:宋体">止</span></span></strong><strong><span style="font-family: 宋体;font-size: 14px">情形</span></strong><strong><span style="font-size: 14px"><span style="font-family:宋体">：</span></span></strong></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;text-indent: 28px;line-height: 24px"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:Calibri">1</span><span style="font-family:宋体">、</span></span><span style="font-size: 14px"><span style="font-family:宋体">双方就解除本协议协商一致的</span></span><span style="font-family: 宋体;font-size: 14px">；</span></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;text-indent: 28px;line-height: 24px"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:Calibri">2</span><span style="font-family:宋体">、乙方专业能力无法完成合同约定内容的。</span></span></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;text-indent: 28px;line-height: 24px"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:Calibri">3</span><span style="font-family:宋体">、</span></span><span style="font-size: 14px"><span style="font-family:宋体">因</span></span><span style="font-family: 宋体;font-size: 14px">不可抗力或其他原因</span><span style="font-size: 14px"><span style="font-family:宋体">致使本协议无法</span></span><span style="font-family: 宋体;font-size: 14px">继续</span><span style="font-size: 14px"><span style="font-family:宋体">履行的。</span></span></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;line-height: 24px"><strong><span style="font-family: 宋体;font-size: 14px">第七条</span></strong><span style="font-family: 宋体;font-size: 14px">&nbsp;&nbsp;<span style="font-family:宋体">本协议如有未尽事宜，双方另行签订补充协议，补充协议与本协议具有同等法律效力。</span></span></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;line-height: 24px"><strong><span style="font-family: 宋体;font-size: 14px"><span style="font-family:宋体">第八条</span> &nbsp;</span></strong><span style="font-family: 宋体;font-size: 14px">双方因本协议发生争议首先应友好协商解决，协商不成均可向甲方所在地人民法院诉讼解决。</span></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;line-height: 24px"><strong><span style="font-family: 宋体;font-size: 14px">第九条</span></strong><span style="font-family: 宋体;font-size: 14px">&nbsp;&nbsp;<span style="font-family:宋体">本协议一式两份，甲、乙双方各执一份，经甲乙双方签字盖章之日起生效。</span></span></p><p style="font-size: medium;text-wrap: wrap"><span style="font-family: Calibri;font-size: 14px">&nbsp;</span></p><p style="margin-top: 7px;margin-bottom: 7px;font-family: 宋体;font-size: 16px;text-wrap: wrap;line-height: 24px"><span style="font-size: 14px">甲方（盖章）：</span><span style="text-decoration:underline;"><span style="font-size: 14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></p><p style="margin-top: 7px;margin-bottom: 7px;font-family: 宋体;font-size: 16px;text-wrap: wrap;line-height: 24px"><span style="font-size: 14px"><span style="font-size: 14px; text-wrap: wrap; font-family: 宋体;">日期：</span><span style="font-family: Calibri; font-size: 14px; text-wrap: wrap; text-decoration-line: underline;"><span style="font-family: 宋体;">&nbsp;${curDate}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span><span style="font-size: 14px; text-wrap: wrap; font-family: 宋体;">&nbsp;</span></span></p><p style="margin-top: 7px;margin-bottom: 7px;font-family: 宋体;font-size: 16px;text-wrap: wrap;line-height: 24px"><span style="font-size: 14px"><span style="font-size: 14px; text-wrap: wrap; font-family: 宋体;"><br/></span></span></p><p style="margin-top: 7px;margin-bottom: 7px;font-family: 宋体;font-size: 16px;text-wrap: wrap;line-height: 24px"><span style="font-size: 14px"><span style="font-size: 14px; text-wrap: wrap; font-family: 宋体;"><br/></span></span></p><p style="margin-top: 7px;margin-bottom: 7px;font-family: 宋体;font-size: 16px;text-wrap: wrap;line-height: 24px"><span style="font-size: 14px"><span style="font-family:宋体">乙方（签字）：</span></span><span style="text-decoration:underline;"><span style="font-size: 14px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span></p><p style=";font-family: Calibri;font-size: 14px;text-wrap: wrap;line-height: 24px"><span style="font-family: 宋体;font-size: 14px"><span style="font-family:宋体">日期：</span></span><span style="text-decoration:underline;"><span style="font-family: 宋体;font-size: 14px">&nbsp;&nbsp;${curDate}&nbsp;&nbsp;</span></span><span style="text-decoration:underline;"><span style="font-size: 14px">&nbsp;</span></span><span style="text-decoration:underline;"><span style="font-family: 宋体;font-size: 14px">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</span></span></p><p><br/></p>')


const route = useRoute();
const api = inject('api')
const signImg = ref('');
const refAgreementSignature = ref()
const speaker = ref({})
function clickSign () {
  refAgreementSignature.value.init();
}


function handleSubmit (val) {
  signImg.value = val
  if (val) {
    html.value = html.value.replace('${signUrl}', val);
    html.value = html.value.replace('signUrl: true;opacity: 0;', '');
    // document.getElementById('signImg').setAttribute('src', val);
  }
  // html.value = html.value.replaceAll('${signImg}', `<img src="${}"/>`)
}

onMounted(() => {
  html.value = store.state.tenant.config.speakerAgreement || ''
  let meetingId = route.params.meetingId
  let speakerId = route.params.speakerId
  if(!meetingId || !speakerId) {

  }
  getSignSpeaker(meetingId, speakerId)
  document.title = '签署协议'
})
const getSignSpeaker = async (meetingId, speakerId) => {
  const res = await api.getSignSpeaker({
    meetingId: meetingId,
    speakerId: speakerId
  })
  document.title = '签署协议'
  if (!res.code) {
    speaker.value = res.data

    html.value = res.data.speakerAgreement
    html.value = html.value.replaceAll('${signImg}', '<img width="100px" src="${signUrl}"  style="border-bottom: 1px solid #000; margin-bottom:-2px; signUrl: true;opacity: 0;"/>')
    html.value = html.value.replaceAll('${speakerName}',res.data.speakerName || '')
    html.value = html.value.replaceAll('${phone}',res.data.phone || '')
    html.value = html.value.replaceAll('${cardNumber}',res.data.cardNumber || '')
    html.value = html.value.replaceAll('${speakerAppearanceFeeAftertax}',res.data.speakerAppearanceFeeAftertax || '')
    html.value = html.value.replaceAll('${curDate}', res.data.signDate || '')

    if (res.data.signUrl) {
      handleSubmit(`//${res.data.signUrl}`)
    }
  }
}
</script>

<style lang="less" scoped>
  .agreement {
    position: relative;
    &_content {
      padding: 0 10px;
      img {
        max-width: 100%;
        vertical-align: middle;
      }


    }
    .sign_img {
      position: absolute;
      width: 100%;
      z-index: 10;
      bottom: 175px;
      left: 100px;
      &__inner {
        width: 80px;
        vertical-align: middle;
      }
    }
  }
</style>
